<template>
	<view>
		<!-- 1，余额 -->
		<view class="balance">
			<view>零钱余额</view>
			<view>￥{{price}}</view>
		</view>
		<!-- 2，操作按钮 -->
		<view class="btn">
			<view class="cz-btn btn-con" @click="gotoCz">
				<view class="img">
					<image :src="priceImg"></image>
				</view>
				<view>
					<text>充值</text>
				</view>
			</view>
			<view class="tx-btn btn-con" @click="gotoTx">
				<view class="img">
					<image :src="priceImg"></image>
				</view>
				<view class="text">
					<text>提现</text>
				</view>
			</view>
		</view>

		<!-- 3，主要操作 -->
		<!-- 3.1，银行卡 -->
		<!-- <my-gomore :inputData="yhkData" @changeInputText="gotoYhk"></my-gomore> -->
		<!-- 3.2，账单 -->
		<my-gomore :inputData="zdData" @changeInputText="gotoBill"></my-gomore>
		<!-- 3.3，安全中心 -->
		<my-gomore :inputData="aqzxData" @changeInputText="gotoSafe"></my-gomore>

		<!-- <my-gomore :inputData="bdData" @changeInputText="gotobdtx"></my-gomore> -->

		<!-- 3.4，提现绑定 -->
		<view class="txbd">
			<view class="title">
				<text>账号绑定</text>
			</view>
			<view class="con-zfb" @click="gotobdtx">
				<view class="left">
					<view class="left-img">
						<image :src="require('@/static/img/main/my/assets/zfb.svg')"></image>
					</view>
					<view class="left-title">
						<text>支付宝</text>
					</view>
				</view>
				<view class="right">
					<view class="right-title">
						<text>用于余额提现</text>
					</view>
					<view class="right-img">
						<image :src="require('@/static/img/common/goMore_1.svg')"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-xy" @click="gotoUserAgreement">
			<text>用户充值协议</text>
		</view>
	</view>
</template>

<script>
	import {
		yhkData,
		zdData,
		aqzxData,
		bdData
	} from './assets.js'

	import myGomore from '@/components/common/my-gomore-input/my-gomore-input.vue'

	import {
		queryBalance
	} from '@/api/http/main/my/pay.js'

	export default {
		components: {
			myGomore
		},
		data() {
			return {
				price: 0,
				priceImg: require('@/static/img/main/my/commonly/assets/main/01.svg'),
				//银行卡
				yhkData: yhkData,
				zdData: zdData,
				aqzxData: aqzxData,
				bdData: bdData
			}
		},
		methods: {
			//查询余额
			queryBalance() {
				var that = this
				queryBalance().then(res => {
					if (res.data.pubInfo.code !== 0) {
						return uni.$showMsg(res.data.pubInfo.message);
					}
					that.price = res.data.busInfo
				})
			},

			//1，跳转充值页面
			gotoCz() {
				uni.navigateTo({
					url: '/subpkg/main/my/assets/assets-cz/assets-cz'
				})
			},
			//2，跳转提现页面
			gotoTx() {
				uni.navigateTo({
					url: '/subpkg/main/my/assets/assets-tx/assets-tx'
				})
			},
			//3，跳转账单页面
			gotoBill() {
				uni.navigateTo({
					url: '/subpkg/main/my/assets/assets-bill/assets-bill'
				})
			},
			//4，跳转绑定
			gotobdtx() {
				uni.navigateTo({
					url: '/subpkg/main/my/assets/binding/assets-bdtx/assets-bdtx'
				})
			},
			//5，银行卡绑定
			gotoYhk() {

			},
			//6，安全中心
			gotoSafe() {
				uni.navigateTo({
					url: '/subpkg/main/my/assets/safe-centre/safe-centre'
				})
			},
			gotoUserAgreement(){
				uni.navigateTo({
					url: '/subpkg/main/my/assets/user-agreement/user-agreement'
				})
			}
		},
		onLoad() {
			this.queryBalance()
		},
		onShow() {
			this.queryBalance()
		}
	}
</script>

<style lang="scss" scoped>
	.balance {
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		padding: 30rpx 0;
	}

	.txbd {
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #eee;
		width: 92%;
		margin-left: 4%;

		.title {
			height: 100rpx;
			line-height: 100rpx;

			text {
				font-size: 28rpx;
				// margin-left: 4%;
			}
		}

		.con-zfb {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			
			&:active {
				background-color: #eee;
			}

			.left {
				display: flex;

				.left-img {
					image {
						height: 50rpx;
						width: 50rpx;
						margin: 25rpx 15rpx 25rpx 15rpx;
					}
				}

				.left-title {
					text {
						font-size: 28rpx;
						line-height: 100rpx;
					}
				}
			}

			.right {
				display: flex;

				.right-title {
					text {
						font-size: 28rpx;
						line-height: 100rpx;
						color: #CDCDCD;
					}
				}

				.right-img {
					image {
						margin-top: 30rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

	.btn {
		display: flex;
		width: 100%;
		justify-content: space-between;
		padding: 40rpx 0;

		.btn-con {
			width: 30%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 20rpx;
			display: flex;
			color: #fff;
			font-size: 28rpx;

			.img {
				image {
					margin: 20rpx 10rpx 20rpx 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.cz-btn {
			margin-left: 15%;
			background-color: rgba(212, 48, 48, 1);
		}

		.tx-btn {
			margin-right: 15%;
			background-color: rgba(67, 207, 124, 1);
		}
	}

	.bottom-xy{
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		text{
			font-size: 28rpx;
			color: #01A8FF;
		}
	}
</style>